<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI面试官 - 简历投递</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link href="/static/css/dashboard.css" rel="stylesheet">
    <link href="/static/css/applicant/dashboard.css" rel="stylesheet">
</head>
<body class="dashboard-page">
    <div class="dashboard-container">
        <!-- 侧边栏 -->
        <nav id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <i class='bx bx-bot'></i>
                    <span>AI面试官</span>
                </div>
            </div>
            <ul class="nav-links">
                <li>
                    <a href="/applicant/dashboard">
                        <i class='bx bxs-dashboard'></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/interview">
                        <i class='bx bx-video'></i>
                        <span>面试中心</span>
                    </a>
                </li>
                <li>
                    <a href="/applicant/dashboard" data-bs-toggle="collapse" data-bs-target="#resumeMenu" aria-expanded="true" aria-controls="resumeMenu">
                        <i class='bx bx-file'></i>
                        <span>简历中心</span>
                        <i class='bx bx-chevron-down'></i> <!-- 添加展开图标 -->
                    </a>
                    <ul class="collapse show" id="resumeMenu">
                        <li>
                            <a href="/applicant/resume">
                                <i class='bx bx-file'></i>
                                <span>简历上传</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/analyze_resume">
                                <i class='bx bx-file'></i>
                                <span>简历分析</span>
                            </a>
                        </li>
                        <li class="active">
                            <a href="/applicant/upload_resume">
                                <i class='bx bx-file'></i>
                                <span>投递简历</span>
                            </a>
                        </li>
                        <li>
                            <a href="/applicant/resume_manage">
                                <i class='bx bx-file'></i>
                                <span>简历管理</span>
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/applicant/personal_center">
                        <i class='bx bx-user'></i>
                        <span>个人中心</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 在sidebar后面添加 -->
        <div class="sidebar-overlay"></div>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <div class="top-bar">
                <div class="user-menu">
                    <img src="{{ url_for('static', filename='applicant_logo/用户头像.jpg') }}" alt="用户头像" class="avatar">
                    <div class="dropdown">
                        <button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown">
                            {{ full_name }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/applicant/personal_center">个人设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="dashboard-content">
                <!-- 搜索框和排序按钮 -->

                <!-- 职位列表 -->


                <div class="section-header">
                    <h5>职位列表</h5>
                </div>

                <!-- 搜索框和排序按钮 -->
                <div class="mb-3">
                    <input type="text" class="form-control" id="jobSearch" placeholder="搜索职位名称...">
                </div>
                <div class="mb-3">
                    <button class="btn btn-secondary sort-btn" data-sort-by="post_date" data-order="asc">
                        <i class='bx bx-sort-a-z'></i> 按发布时间排序
                    </button>
                    <button class="btn btn-secondary sort-btn" data-sort-by="expiration_date" data-order="asc">
                        <i class='bx bx-sort-a-z'></i> 按截至日期排序
                    </button>
                </div>


                <div class="table-responsive">
                    <table class="table" id="jobTable">
                        <thead>
                            <tr>
                                <th>职位名称</th>
                                <th>公司名称</th>
                                <th>类型</th>
                                <th>薪资范围</th>
                                <th>发布时间</th>
                                <th>截至日期</th>
                                <th>地点</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 职位列表将通过AJAX动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>

<!-- 模态框 -->
<!-- 模态框 -->
<div class="modal fade" id="jobDetailsModal" tabindex="-1" aria-labelledby="jobDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="jobDetailsModalLabel">岗位详情</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title" id="jobTitle"></h5>
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>公司名称:</strong> <span id="companyName"></span></li>
                                    <li class="list-group-item"><strong>职位类型:</strong> <span id="jobType"></span></li>
                                    <li class="list-group-item"><strong>薪资范围:</strong> <span id="salaryRange"></span></li>
                                    <li class="list-group-item"><strong>地点:</strong> <span id="location"></span></li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item"><strong>状态:</strong> <span id="status"></span></li>
                                    <li class="list-group-item"><strong>发布时间:</strong> <span id="postDate"></span></li>
                                    <li class="list-group-item"><strong>截至日期:</strong> <span id="expirationDate"></span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="mt-3">
                            <h6>职位描述:</h6>
                            <p id="description"></p>
                        </div>
                        <div class="mt-3">
                            <h6>岗位要求:</h6>
                            <p id="requirements"></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let submittedJobIds = [];
let originalJobs = []; // 存储原始数据
let currentSort = { field: null, order: 'asc' };

document.addEventListener('DOMContentLoaded', function() {

    // 获取已投递的职位列表
    fetch('/api/get_submitted_jobs')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                submittedJobIds = data.job_ids;
            }
        })
        .catch(error => console.error('Error fetching submitted jobs:', error));

    // 获取原始职位数据并初始化
    fetch('/api/get_all_jobs')
        .then(response => response.json())
        .then(data => {
            originalJobs = data.jobs;
            renderJobs(data.jobs);
        });

    // 搜索功能实现
    document.getElementById('jobSearch').addEventListener('input', function(e) {
        const keyword = e.target.value.toLowerCase();
        const filtered = originalJobs.filter(job =>
            job.title.toLowerCase().includes(keyword)
        );
        renderJobs(filtered);
    });

    // 排序功能实现
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const sortField = this.dataset.sortBy;
            const isActive = this.classList.contains('active');
            const newOrder = isActive ? (currentSort.order === 'asc' ? 'desc' : 'asc') : 'asc';

            // 更新按钮状态
            document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            currentSort = { field: sortField, order: newOrder };

            // 更新图标
            this.querySelector('i').className = newOrder === 'asc' ?
                'bx bx-sort-up' : 'bx bx-sort-down';

            // 执行排序
            const sorted = [...originalJobs].sort((a, b) => {
                const valA = a[sortField];
                const valB = b[sortField];
                return newOrder === 'asc' ?
                    valA.localeCompare(valB) :
                    valB.localeCompare(valA);
            });
            renderJobs(sorted);
        });
    });

    // 定义事件绑定函数
    function bindApplyButtons() {
        const applyButtons = document.querySelectorAll('.apply-btn');
        applyButtons.forEach(button => {
            button.addEventListener('click', function() {
                const jobId = this.getAttribute('data-job-id');
                const jobTitle = this.getAttribute('data-job-title');

                // 获取用户简历列表
                fetch('/api/get_resumes')
                    .then(response => response.json())
                    .then(data => {
                        if (!data.success) {
                            alert('获取简历失败');
                            return;
                        }

                        const resumes = data.resumes;
                        if (resumes.length === 0) {
                            alert('请先上传简历');
                            return;
                        }

                        // 创建模态框内容
                        const modalContent = `
                            <div class="modal fade" id="submitResumeModal" tabindex="-1" aria-labelledby="submitResumeModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="submitResumeModalLabel">投递简历 - ${jobTitle}</h5>
                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                        </div>
                                        <div class="modal-body">
                                            <form id="submitResumeForm">
                                                <div class="mb-3">
                                                    <label for="resumeSelect" class="form-label">选择简历</label>
                                                    <select class="form-select" id="resumeSelect" name="resumeSelect" required>
                                                        ${resumes.map(resume => `<option value="${resume.id}">${resume.filename}</option>`).join('')}
                                                    </select>
                                                </div>
                                                <button type="submit" class="btn btn-primary">提交</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;

                        // 将模态框添加到页面
                        document.body.insertAdjacentHTML('beforeend', modalContent);

                        // 显示模态框
                        const modal = new bootstrap.Modal(document.getElementById('submitResumeModal'));
                        modal.show();

                        // 提交表单事件
                        document.getElementById('submitResumeForm').addEventListener('submit', function(event) {
                            event.preventDefault();
                            const resumeId = document.getElementById('resumeSelect').value;

                            fetch('/api/resume_submit', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json'
                                },
                                body: JSON.stringify({ job_id: jobId, resume_id: resumeId })
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    alert('简历投递成功');
                                    modal.hide();
                                    submittedJobIds.push(jobId);
                                    const button = document.querySelector(`.apply-btn[data-job-id="${jobId}"]`);
                                    if (button) {
                                        button.classList.replace('btn-primary', 'btn-secondary');
                                        button.classList.add('disabled');
                                        button.textContent = '已投递';
                                    }
                                } else {
                                    alert('简历投递失败');
                                }
                            });
                        });
                    });
            });
        });
    }

    function bindViewButtons() {
        const viewJobDetailsButtons = document.querySelectorAll('.view-job-details');
        viewJobDetailsButtons.forEach(button => {
            button.addEventListener('click', function() {
                const jobId = this.getAttribute('data-job-id');

                fetch(`/api/get_job_details?job_id=${jobId}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            const job = data.job;
                            document.getElementById('jobTitle').textContent = job.title;
                            document.getElementById('companyName').textContent = job.company_name;
                            document.getElementById('jobType').textContent = job.job_type;
                            document.getElementById('salaryRange').textContent = `${job.min_salary} - ${job.max_salary}`;
                            document.getElementById('location').textContent = job.location;
                            document.getElementById('status').textContent = job.status === 'active' ? '招聘中' : '已关闭';
                            document.getElementById('postDate').textContent = job.post_date;
                            document.getElementById('expirationDate').textContent = job.expiration_date || '无';
                            document.getElementById('description').textContent = job.description;
                            document.getElementById('requirements').textContent = job.requirements;

                            const modal = new bootstrap.Modal(document.getElementById('jobDetailsModal'));
                            modal.show();
                        } else {
                            alert('获取岗位详情失败');
                        }
                    })
                    .catch(error => console.error('Error fetching job details:', error));
            });
        });
    }

    // 通用渲染函数
    function renderJobs(jobs) {
        const tbody = document.querySelector('#jobTable tbody');
        tbody.innerHTML = jobs.map(job => `
            <tr>
                <td>${job.title}</td>
                <td>${job.company_name}</td>
                <td>${job.job_type}</td>
                <td>${job.min_salary} - ${job.max_salary}</td>
                <td>${job.post_date}</td>
                <td>${job.expiration_date}</td>
                <td>${job.location}</td>
                <td><span class="status ${job.status}">${job.status === 'active' ? '招聘中' : '已关闭'}</span></td>
                <td>
                    ${job.applied?
                        '<button class="btn btn-secondary disabled">已投递</button>' :
                        `<button class="btn btn-primary apply-btn" data-job-id="${job.id}" data-job-title="${job.title}">投递简历</button>`}
                    <button class="btn btn-primary btn-sm view-job-details" data-job-id="${job.id}">查看岗位信息</button>
                </td>
            </tr>
        `).join('');

        // 重新绑定事件
        bindApplyButtons();
        bindViewButtons();
    }
});
</script>





</body>
</html>
